<template>
  <div id="home" class="wrapper">
    <nav-bar class="home-nav">
      <template v-slot:center><div>购物街</div></template> 
    </nav-bar>

    <tab-control 
      :titles="['流行','新款','精选']" 
      @tabClick="tabClick"
      ref="tabControl1"
      class="tab-control" v-show="isTabFixed"></tab-control>

    <scroll class="content" ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore"
            >
      <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view></feature-view>
      <tab-control 
      :titles="['流行','新款','精选']" 
      @tabClick="tabClick"
      ref="tabControl2"
      ></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
    
</template>

<script>
  import NavBar from '../../components/common/navbar/NavBar.vue';
  import HomeSwiper from '../home/childComps/HomeSwiper.vue'
  import RecommendView from '../home/childComps/RecommendView.vue'
  import FeatureView from '../home/childComps/FeatureView.vue'
  import Scroll from '../../components/common/scroll/Scroll.vue'
  import GoodsList from '../../components/content/goods/GoodsList.vue'
  import BackTop from '../../components/content/backTop/BackTop.vue'

  import TabControl from '../../components/content/tabControl/TabControl.vue'
  import {getHomeMultidata,getHomeGoods} from '../../network/home'
  export default {
    name: "Home",
    components: {
      NavBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodsList,
      Scroll,
      BackTop
    },
    data(){
      return{
        // 获取传入的数据
        banners:[], 
        recommends:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currentType: 'pop', 
        isShowBackTop:false,
        tabOffsetTop:0,
        isTabFixed:false,
        saveY:0,
        // result:null
      }
    },
    computed: {
        showGoods(){
          return this.goods[this.currentType].list
        }
      },
    created(){
      // 请求多个数据
      this.getHomeMultidata()
      // getHomeMultidata().then(res=>{
      //   this.result = res
      // })
      // 请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
      
    },
    mounted () {
      // const refresh= this.debounce(this.$refs.scroll.refresh)
      // this.$bus.$on('itemImageLoad',() => {
      //   refresh()
      // })
      
    },
   
    activated () {
      this.$refs.scroll.refresh()
      this.$refs.scroll.scrollTo(0,this.saveY,0)
      
    },
    deactivated () {
      this.saveY = this.$refs.scroll.scroll.y
    },
    methods: {
      
      // 事件监听相关方法
      // debounce(func,delay){
      //   let timer = null

      //   return function (...args){
      //     if(timer) clearTimeout(timer)
      //     timer = setTimeout(()=>{
      //       func.apply(this.args)
      //     },delay)
      //   }
      // },
      // 防抖函数起作用的过程：
      // 如果直接执行，会执行多次，可以将refresh函数传入debounce函数中生成新的函数，
      tabClick(index){
        switch(index){
          case 0 :
            this.currentType = 'pop'
            break
          case 1 :
            this.currentType = 'new'
            break
          case 2 :
            this.currentType = 'sell'
            break
        }
        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
      },
      
      backClick(){
        this.$refs.scroll.scrollTo(0,0)
      },
      contentScroll(position) {
        
        // 判断BackTop是否显示
        this.isShowBackTop = (-position.y) > 1000
        // 决定 tabControl是否吸顶(position:fixed)
        this.isTabFixed = (-position.y) > this.tabOffsetTop
        
      },
      loadMore() {
        this.getHomeGoods(this.currentType)
        
      },
      swiperImageLoad(){
        // 可以用该值来做参数来计算吸顶的高度   如果有bug，要多加载下面两个模块的imgload
        
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
      },
      // 网络请求相关方法
      getHomeMultidata(){
        getHomeMultidata().then(res =>{
        // 执行完之前把数据保存到data中,就不会被销毁了
        this.banners = res.data.banner.list,
        this.recommends = res.data.recommend.list
      })
      },
      getHomeGoods(type){
        const page = this.goods[type].page + 1
        getHomeGoods(type,page).then(res =>{
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1

          this.$refs.scroll.finishPullUp()
        })
      },
    }
  }
</script>

<style scoped>
  #home{
    
    position: relative;
    /* 视口高度 */
    height: 100vh;
    
    
  }
  .home-nav {
    background-color: var(--color-tint);
    color:#fff;
    /* 为了解决 原生滚动 导航被上拉的问题时 */
    /* position: fixed;
    top:0; left:0; right:0;
    z-index:9; */
    overflow: hidden;
  }
  /* .tab-control{ */
    /* 此属性根据top值设定fixed的值 */
    /* position: sticky; 
    top:44px;
    z-index: 9;
  } */
  .tab-control{
    position: relative;
    z-index: 9;
  }
  .content{
    /* 设置绝对定位后，留出底部和顶部的高度 */
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0；
  }
  /* .content{
    height: calc(100% );
    overflow: hidden;
    margin-top: 44px;
  } */
  
</style>
